---
title: Code
description: A typography component for displaying inline code snippets.
metaDescription: Code typography component for React and Solid.js displaying inline code snippets with semantic markup and consistent styling.
category: typography
links:
  recipe: https://github.com/cschroeter/park-ui/blob/next/packages/preset/src/recipes/code.ts
---

<ComponentExample name="basic" />

## Installation

<InstallationGuide />

## Usage

```tsx
import { Code } from '@/components/ui'
```

```tsx
<Code>Hello world</Code>
```

## Examples

### Sizes

Use the `size` prop to change the size of the code component.

<ComponentExample name="sizes" />

### Variants

Use the `variant` prop to change the appearance of the code component.

<ComponentExample name="variants" />

### Colors

Use the `colorPalette` prop to change the color scheme of the component.

<ComponentExample name="colors" />

## Props

<PropsTable />